<template>
  <div :id="id" style="height: 40vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "lineEchart",
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: "p1"
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
  },
  mounted() {
    // this.initOptions();
    // this.initCharts();
    setTimeout(() => {
      this.initOptions(this.listData);
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions(list) {
      this.options = {
        xAxis: {
          type: "category",
          data: [
            "0:00~4:00",
            "4:00~8:00",
            "8:00~12:00",
            "12:00~16:00",
            "16:00~20:00",
            "20:00~24:00"
          ]
        },
        title: {
          text: "检查时间段分布情况"
          // subtext: "检查天数：3天"
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],
            data: list,
            type: "line"
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.options);
    }
  }
};
</script>
